Ext.namespace("Ext.ux");
Ext.ux.RemoteCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup, {
    baseParams: null,
    url: '',
    defaultItems: [new Ext.form.Checkbox({
        xtype: 'checkbox',
        boxLabel: 'No Items',
        disabled: true,
        hidden: true
	})],
    cbfieldId: 'id',
    cbfieldName: 'name',
    cbfieldLabel: 'boxLabel',
    cbfieldValue: 'inputValue',
    cbfieldChecked: 'checked',
    reader: null,
    
    //private
    initComponent: function ()
    {
		this.items = [ new Ext.form.Checkbox({
	        xtype: 'checkbox',
	        boxLabel: 'No Items',
	        disabled: true,
	        hidden: true
		})];
		
        this.addEvents(
        /**
         * @event add
         * Fires when a checkbox is added to the group
         * @param {Ext.form.CheckboxGroup} this
         * @param {object} chk The checkbox that was added.
         */
        'add',
        /**
         * @event beforeadd
         * Fires before a checkbox is added to the group
         * @param {Ext.form.CheckboxGroup} this
         * @param {object} chk The checkbox to be added.
         */
        'beforeadd',
        /**
         * @event load
         * Fires when a the group has finished loading (adding) new records
         * @param {Ext.form.CheckboxGroup} this
         */
        'load',
        /**
         * @event beforeremove
         * Fires before a checkbox is removed from the group
         * @param {Ext.form.CheckboxGroup} this
         * @param {object} chk The checkbox to be removed.
         */
        'beforeremove');

        Ext.ux.RemoteCheckboxGroup.superclass.initComponent.apply(this, arguments);
    },

    onRender: function ()
    {
        Ext.ux.RemoteCheckboxGroup.superclass.onRender.apply(this, arguments);
        if (this.showMask)
        {
            this.loadmask = new Ext.LoadMask(this.ownerCt.getEl(), {
                msg: "Loading..."
            });
        }
        this.reload();
    },

    reload: function ()
    {
        if ((this.url != '') && (this.reader != null))
        {
            this.removeAll(); 
            if (this.showMask)
            {
                this.loadmask.show();
            }
           
            this.handleCB = function (responseObj, options)
            {
            	var response = Ext.decode(responseObj.responseText);

                if (response.success)
                {
                    var data = this.reader.readRecords(Ext.decode(responseObj.responseText));
                    for (var i = 0; i < data.records.length; i++)
                    {
                        var record = data.records[i];
                        var item = new Ext.form.Checkbox(
                        {
                            xtype: 'checkbox',
                            listeners: {
                                'render': this.cbRenderer,
                                'check': this.cbCheckEvent
                            },
                            boxLabel: record.get(this.cbfieldLabel),
                            inputValue: record.get(this.cbfieldValue)
                        });

                        if (this.cbfieldId != '')
                        {
                            item.id = record.get(this.cbfieldId);
                        }

                        if (this.cbfieldName != '')
                        {
                            item.name = record.get(this.cbfieldName);
                        }

                        if (this.cbfieldChecked != '')
                        {
                            item.checked = record.get(this.cbfieldChecked);
                        }

                        if (record.get('disabled'))
                        {
                            item.disabled = true;
                        }

                        item.on('check', this.cbHandler, this.cbHandlerScope ? this.cbHandlerScope : this, {buffer: 10});
                        
                        if (this.fireEvent('beforeadd', this, item) !== false)
                        {
                            var items = this.items;
                            var columns = this.panel.items;
                            // ---add by liuhaifeng 
                            var at = items.getCount() % columns.getCount();
                            if(at == 0)
                            	at = columns.getCount() - 1;
                            else
                            	at -= 1;
                            var column = columns.itemAt(at);
                            var chk = column.add(item);
                            items.add(item);
                            this.doLayout();
                        	
                            this.fireEvent('add', this, item);
                        }
                    }

                    this.fireEvent('load', this);
                }
                if (this.showMask)
                {
                	this.loadmask.hide();
                }
            }

        }
       
        Ext.Ajax.request(
        {
            headers: ['Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'],
            method: 'POST',
            url: this.url,
            params: this.baseParams,
            success: this.handleCB,
            //failure: fail,
            scope: this
        });
    },
    removeAll: function ()
    {
    	for (var j = 0; j < this.columns.length; j++)
        {
           if (this.panel.items.length > 0)
    		{
            	var items = this.items;
            	var columns = this.panel.items;
            	var column = columns.itemAt(items.getCount() % columns.getCount());
            	                
            	column.items.each(
            	
                function (i)
                {
                    if (this.fireEvent('beforeremove', this, i) !== false)
                    {
                        var items = this.items;
                    	var columns = this.panel.items;
                    	var column = columns.itemAt(items.getCount() % columns.getCount());
                        
                        var chk = column.remove(i);
                        items.remove(i);
                    }
                }, this);
            }
        }
    },
    getGroupValue: function ()
    {
        var valuesArray = [];
        for (var j = 0; j < this.columns; j++)
        {
            if (this.panel.getComponent(j).items.length > 0)
            {
                this.panel.getComponent(j).items.each(

                function (i)
                {
                    if (i.checked)
                    {
                        valuesArray.push(i.inputValue);
                    }
                });
            }
        }
        return valuesArray;
    }

});
Ext.reg("remotecheckboxgroup", Ext.ux.RemoteCheckboxGroup);

/**
Ext.namespace("Ext.ux");

Ext.ux.RemoteCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup, {
	
	url : '',
	
	defaultItems : [{
		boxLabel : 'no options',
		disabled : true
	}],
	
	reader : new Ext.data.JsonReader( {
		totalProperty : 'totalProperty',
		root : 'resultSet',
		fields : [ {
			name : 'id'
		}, {
			name : 'name'
		}, {
			name : 'boxLabel'
		}, {
			name : 'inputValue'
		}, {
			name : 'checked'
		}, {
			disabled : 'disabled'
		}]
	}),
	
	onRender : function(H, F) {
	
		this.reload();
		
		Ext.ux.RemoteCheckboxGroup.superclass.onRender.call(this, H, F)
	},
	
	reload : function(_config) {
		
		if (_config == null) {
			_config = {};
		}
		Ext.apply(this, _config);
		
		this.items = this.defaultItems;
		
		if (this.url != '') {
			var conn = Ext.lib.Ajax.getConnectionObject().conn;
			conn.open("POST", this.url, false);
			conn.send(null);
			var response = Ext.decode(conn.responseText);
			var responses = this.reader.readRecords(Ext.decode(conn.responseText));
	
			if (response.success) {
				var records = responses.records;
				for (var i = 0;i < records.length; i++) {
					this.items[i] = records[i].data;
				}
			}
		}
	}
});

Ext.reg("remotecheckboxgroup", Ext.ux.RemoteCheckboxGroup);

 * 
 * 用法
 * {
 * 	xtype : 'remotecheckboxgroup',
 * 	url : ''   
 * }
 * 
 * json返回数据格式
 * {
 * 	success:true,
 * 	root:[
 * 		{boxLabel: 'i am 1', name: '1'},
 * 		{boxLabel: 'i am 2', name: '2', isChecked: true},
 * 		{boxLabel: 'i am 3', name: 'cb-auto-3'},
 * 		{boxLabel: 'i am 4', name: 'cb-auto-4'},
 * 		{boxLabel: 'i am 5', name: 'cb-auto-5'}
 * 	]
 * }
 *  
 */